<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fast-IM 测试页面</title>
    <style>
        .btn-group{
            display: inline-block;
        }
    </style>
</head>
<body style="background-color: #262626">
<h2 style="color: #ffffff;text-align: center;background-color: #434343;border-radius: 10px;"> WebSocket测试页面 </h2>
<h5 style="color: #0ec9ff"># 群内聊天消息监听链接 ws://127.0.0.1:9000/group/chat/{groupId}/{userId}/{token}</h5>
<h5 style="color: #0ec9ff"># 用户群组列表动态监听链接 ws://127.0.0.1:9000/group/list/{userId}/{token}</h5>
<input type='text' value='ws://127.0.0.1:9000/group/chat/1/1/xxx' class="form-control" style='width:70%;font-weight: 400;font-size: 20px;;background-color: #434343;border-radius: 5px;color: white;display:inline;margin-right: 5px;'
       id='wsaddr' />
<div class="btn-group" >
    <button type="button" class="btn btn-default" onclick='addsocket();' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">连接</button>
    <button type="button" class="btn btn-default" onclick='closesocket();' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">断开</button>
    <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")' style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">清空</button>
</div>
<div class="row">
    <div id="output" style="border:1px solid #ccc;height:400px;overflow: auto;margin: 20px 0;background-color: #000000;color: white;font-weight: 400;border-radius: 5px;"></div>
    <input type="text" id='message' class="form-control" style='width:70%;font-weight: 400;font-size: 20px;;background-color: #434343;color: white;margin-right: 5px;border-radius: 5px;' placeholder="待发信息" onkeydown="en(event);">
    <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="doSend();" style="font-size: 20px;background-color: #595959;color: white;border-radius: 5px;">发送</button>
            </span>
</div>
</div>
</body>

<script crossorigin="anonymous" integrity="sha384-LVoNJ6yst/aLxKvxwp6s2GAabqPczfWh6xzm38S/YtjUyZ+3aTKOnD/OJVGYLZDl" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    function formatDate(now) {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
            " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                second = second < 10 ? ("0" + second) : second);
    }
    var output;
    var websocket;

    function init() {
        output = document.getElementById("output");
        testWebSocket();
    }

    function addsocket() {
        var wsaddr = $("#wsaddr").val();
        if (wsaddr == '') {
            alert("请填写websocket的地址");
            return false;
        }
        StartWebSocket(wsaddr);
    }

    function closesocket() {
        websocket.close();
    }

    function StartWebSocket(wsUri) {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }

    function onOpen(evt) {
        writeToScreen("<span style='color:#f5222d'>WebSocket连接成功</span>");
    }

    function onClose(evt) {
        writeToScreen("<span style='color:#f5222d'>WebSocket连接断开</span>");
        websocket.close();
    }

    function onMessage(evt) {
        writeToScreen('<span style="color:#1890ff">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
            evt.data + '</span>');
    }

    function onError(evt) {
        writeToScreen('<span style="color: #f5222d;">发生错误:</span> ' + evt.data);
    }

    function doSend() {
        var message = $("#message").val();
        if (message == '') {
            alert("请填写发送信息");
            $("#message").focus();
            return false;
        }
        if (typeof websocket === "undefined") {
            alert("WebSocket还未连接或连接失败");
            return false;
        }
        if (websocket.readyState == 3) {
            alert("WebSocket已经关闭，请重新连接");
            return false;
        }
        console.log(websocket);
        $("#message").val('');
        writeToScreen('<span style="color:#52c41a">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);
        websocket.send(message);
    }

    function writeToScreen(message) {
        var div = "<div class='newmessage'>" + message + "</div>";
        var d = $("#output");
        var d = d[0];
        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
        $("#output").append(div);
        if (doScroll) {
            d.scrollTop = d.scrollHeight - d.clientHeight;
        }
    }

    function en(event) {
        var evt = evt ? evt : (window.event ? window.event : null);
        if (evt.keyCode == 13) {
            doSend()
        }
    }
</script>

</html>
